<template>
    <div class="shopping">
        <div>
            <div class="top">
                <div class="top-l">
                    <h2>购物车</h2>
                    <router-link to="" tag="span">收藏</router-link>
                </div>
                <div class="top-r">管理</div>
            </div>

            <div class="content">
                <div class="list">
                    <div class="item" v-for="i in list" :key="i.id">
                        <div class="image">
                            <img :src="i.image" alt="" />
                        </div>
                        <div class="cont">
                            <div class="title">
                                {{ i.name }}
                            </div>
                            <div class="num">{{ i.num }}杯</div>
                            <div class="price">
                                {{ (i.price * i.num).toFixed(2) }}元
                            </div>
                        </div>
                        <div class="radio">
                            <input
                                type="checkbox"
                                value="check"
                                v-model="i.isshow" />
                        </div>
                    </div>
                </div>
                <div class="op">
                    <div class="op-l">
                        <input
                            type="checkbox"
                            value="check"
                            v-model="check"
                            @click="allcheck" />
                        全选
                    </div>
                    <div class="op-r">
                        <span class="num">
                            已选{{ all }},<b
                                >合计:<span>￥{{ allPrice }}</span></b
                            >
                        </span>
                        <div class="close">结算外卖</div>
                    </div>
                </div>
            </div>
        </div>

        <foot></foot>
    </div>
</template>

<script>
import { getAllPro } from "@/api/request";
import foot from "@/components/common/foot.vue";
export default {
    data() {
        return {
            list: [],
            check: false,
        };
    },
    created() {
        this.$nextTick(() => {
            getAllPro("/shop").then((res) => {
                let { result } = res.data;
                this.list = result;
            });
        });
        this.$store.dispatch("getShop")
    },
    computed: {
        allPrice() {
            let sum = 0;
            this.list.forEach((item) => {
                // console.log(typeof item.isshow);
                if (item.isshow) {
                    sum += item.price * item.num;
                }
            });
            return sum.toFixed(2);
        },

        all() {
            let num = 0;
            this.list.forEach((item) => {
                if (item.isshow) {
                    num += item.num;
                }
            });
            return num;
        },
    },
    watch: {
        list: {
            deep: true,
            handler() {
                this.list.forEach((item) => {
                    // console.log(item.isshow);
                    if (item.isshow != 0) {
                        this.check = true;
                    } else {
                        this.check = false;
                    }
                });
            },
        },
    },
    components: {
        foot,
    },
    methods: {
        allcheck() {
            if (this.check) {
                this.list.forEach((item) => {
                    item.isshow = false;
                });
            } else {
                this.list.forEach((item) => {
                    item.isshow = true;
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.shopping {
    // padding: .2rem;
    background-color: rgb(243, 243, 243);
    height: 100vh;
    overflow: hidden;
    .top {
        padding: 0.2rem;
        margin: 0.15rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-l {
            display: flex;
            align-items: center;
            span {
                margin-left: 0.1rem;
                color: rgb(151, 151, 151);
                font-size: 0.2rem;
            }
        }
    }

    .content {
        margin: 0 0.26rem;
        // height: 6rem;
        background-color: #fff;
        border-radius: 0.2rem;
        position: relative;

        .list {
            .item {
                width: 100%;
                display: flex;
                height: 2.7rem;
                // border: 1px solid #000;
                box-sizing: border-box;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.1rem;
                .image {
                    height: 2.5rem;
                    img {
                        width: 2.5rem;
                        height: 2.5rem;
                        background-color: #bfa;
                    }
                }

                .cont {
                    margin-left: 0.15rem;
                    // background-color: red;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    // width: 4.5rem;
                    flex: 1;
                    height: 100%;
                    .title {
                        width: 4rem;
                        font-weight: 800;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 0.5rem;
                    }
                    .num {
                        color: rgb(6, 193, 176);
                        font-size: 0.4rem;
                    }
                    .price {
                        color: #ec4e1e;
                        font-size: 0.5rem;
                    }
                }

                .radio {
                    width: 0.8rem;
                    text-align: center;
                    input {
                        zoom: 1.5;
                    }
                }
            }
        }

        .op {
            width: calc(100% - 0.26rem * 2);
            height: 1.32rem;
            border-bottom: 0.01rem solid #e3e3e3;
            position: fixed;
            bottom: 1.62rem;
            left: 0.26rem;
            background-color: #fff;
            border-radius: 0 0 0.3rem 0.3rem;
            display: flex;
            box-shadow: 0 0.02rem 0.2rem #e3e3e3;
            justify-content: space-between;
            padding: 0 0.2rem;
            box-sizing: border-box;
            align-items: center;
        }

        .op-r {
            display: flex;
            align-items: center;
            .num {
                span {
                    color: #ec4e1e;
                }
            }
            .close {
                margin: 0 0.24rem 0 0.18rem;
                color: #fff;
                background-color: rgb(6, 193, 176);
                height: 0.8rem;
                width: 2.08rem;
                line-height: 0.8rem;
                text-align: center;
                border-radius: 0.45rem;
            }
        }
    }
}
</style>
